<template>
  <a-drawer destroyOnClose :title="record.name" width="1200" :closable="false" @close="onClose" :visible="visible"
    class="ene-w-h-d">
    <div class="top-row">
      <a-form-item :colon="false" label="设备名称">
        {{ record.shebeiname }}
      </a-form-item>
      <a-form-item :colon="false" label="设备编号">
        {{ record.shebeibianhao }}
      </a-form-item>
      <a-form-item :colon="false" label="计划名称">
        {{ record.name }}
      </a-form-item>
      <a-form-item :colon="false" label="计划编号">
        {{ record.bianhao }}
      </a-form-item>
      <a-form-item :colon="false" label="计划巡检日期">
        {{ record.jihuaxunjianshijian }}
      </a-form-item>
      <a-form-item :colon="false" label="巡检完成时间">
        {{ record.xunjianwanchengshijian }}
      </a-form-item>
      <a-form-item :colon="false" label="执行人">
        {{ record.fuzeren_dictText }}
      </a-form-item>
    </div>

    <a-tabs defaultActiveKey="1" @change="handleChange">
      <a-tab-pane tab="基础信息" key="1" :forceRender="true">
        <a-collapse :defaultActiveKey="['1', '2']" :bordered="false">
          <a-collapse-panel key="1" header="基础信息">
            <a-row class="basic-info-box">
              <a-col :span="10">
                <a-form-model-item :colon="false" label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="shebeiname">
                  <a-input disabled v-model="record.shebeiname" placeholder="请输入设备名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="设备编号" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="shebeibianhao">
                  <a-input disabled v-model="record.shebeibianhao" placeholder="请输入设备编号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10">
                <a-form-model-item :colon="false" label="计划名称" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="name">
                  <a-input disabled v-model="record.name" placeholder="请输入计划名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="计划编号" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="bianhao">
                  <a-input disabled v-model="record.bianhao" placeholder="请输入计划编号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10">
                <a-form-model-item :colon="false" label="计划巡检时间" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="jihuaxunjianshijian">
                  <a-input disabled v-model="record.jihuaxunjianshijian" />
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="巡检周期（天）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="xunjianzhouqi">
                  <a-input disabled v-model="record.xunjianzhouqi" />
                </a-form-model-item>
              </a-col>
              <a-col :span="10">
                <a-form-model-item :colon="false" label="巡检完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="xunjianwanchengshijian">
                  <a-input disabled v-model="record.xunjianwanchengshijian" />
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="计划负责人" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="managerId">
                  <a-input disabled v-model="record.fuzeren_dictText" />
                </a-form-model-item>
              </a-col>
              <a-col :span="10">
                <a-form-model-item :colon="false" label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="type">
                  <a-input disabled v-model="record.beizhu" />
                </a-form-model-item>
              </a-col>
            </a-row>

          </a-collapse-panel>
          <a-collapse-panel key="1" header="系统信息">
            <a-row class="system-info-box">
              <a-col :span="10">
                <a-form-model-item :colon="false" label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                  <a-input disabled v-model="record.createBy" placeholder=""></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol"
                  prop="name">
                  <a-input disabled v-model="record.createTime" placeholder=""></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
          <a-collapse-panel key="1" header="巡检图片">
            <a-row class="system-info-box">
              <a-col :span="24">
                <a-form-model-item :colon="false" label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                  <j-image-upload disabled isMultiple v-model="record.xunjiantupian"></j-image-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-tab-pane>
      <a-tab-pane tab="巡检项目" key="2" :forceRender="true">
        <a-input-search placeholder="项目名称/项目编号" style="width: 200px;margin-bottom: 20px" @search="onSearchXiangmu" />
        <a-table :rowKey="rowKey" :columns="xianmgmucolumns" :pagination="false" :dataSource="xiangmus">
        </a-table>
      </a-tab-pane>
    </a-tabs>

  </a-drawer>
</template>
<script>
import { JVXETypes } from "@comp/jeecg/JVxeTable";
import { getAction, postAction } from "@api/manage";

const xianmgmucolumns = [
  {
    title: '巡检项目',
    align: "center",
    dataIndex: 'name'
  },
  {
    title: '检验方法',
    align: "center",
    dataIndex: 'fangshi'
  },
  {
    title: '检验工具',
    align: "center",
    dataIndex: 'gongju'
  },
  {
    title: '检验标准',
    align: "center",
    dataIndex: 'jianyanbiaozhun'
  },
  {
    title: '判断标准',
    align: "center",
    dataIndex: 'panduanbiaozhun_dictText'
  },
  {
    title: '标准上限',
    align: "center",
    dataIndex: 'shangxian'
  },
  {
    title: '标准下限',
    align: "center",
    dataIndex: 'xiaxian'
  },
  {
    title: '备注',
    align: "center",
    dataIndex: 'beizhu'
  },
  {
    title: '巡检结果',
    align: "center",
    dataIndex: 'jieguo'
  },
  {
    title: '巡检备注说明',
    align: "center",
    dataIndex: 'xunjianbeizhu'
  },
  
]

export default {
  props: {
    record: {
      require: true,
      type: Object
    },
    visible: {
      default: false,
      require: true,
      type: Boolean
    },

  },
  data() {
    return {
      url: {
        queryEneWarehouseLocation: '/gongdan/gdXunjianJihua/queryById',
        delEneWarehouseLocation: '/ene/eneWarehouse/delEneWarehouseLocation',
        shebeichaxun: '/device/eneDevice/list',
        xiangmuchaxun: '/gongdan/gdXunjianRenwuXiangmu/list',
      },
      xianmgmucolumns,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      xiangmus: [],
      xiangmusCopy: []
    }
  },
  mounted() {

  },
  methods: {
    onSearchXiangmu(value) {
      if(value===undefined || value==='' || value===null) {
        this.xiangmus=this.xiangmusCopy
        return
      }
      this.xiangmus=[]
      this.xiangmusCopy.forEach(element => {
        if(element.name.indexOf(value)!=-1 || element.bianhao.indexOf(value)!=-1){
          this.xiangmus.push(element)
        }
      });
    },
    getXiangmus() {
      getAction(this.url.xiangmuchaxun, { renwu: this.record.id, pageSize:10000000 }).then(res => {
        if (res.success) {
          this.xiangmus = res.result.records
          this.xiangmusCopy = res.result.records
        }
      })
    },
    handleChange(value) {
      if (value == '2') {
        this.getXiangmus()
      }
    },
    onClose() {
      this.visible = false
    }
  }
}
</script>
<style scoped>
.top-row {
  background: #F4F5F7;
  padding: 12px 24px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.top-row /deep/ .ant-form-item {
  margin-bottom: 0;
  color: #6B778C
}

.top-row /deep/ .ant-form-item-label {
  line-height: 1;
}

.top-row /deep/ .ant-form-item-control {
  line-height: 1;
  margin-top: 10px;
}

.top-row /deep/ .ant-form-item-label>label {
  color: #6B778C
}

.basic-info-box,
.system-info-box {
  padding: 20px 0;
}

.basic-info-box /deep/ .ant-form-item,
.system-info-box /deep/ .ant-form-item {
  margin-bottom: 20px;
}

.basic-info-box /deep/ .ant-form-item-label>label {
  color: #172B4D;
}

.ene-w-h-d /deep/ .ant-collapse-borderless>.ant-collapse-item {
  border: none;
}

.ene-w-h-d /deep/ .ant-collapse-header {
  background: #F4F5F7;
}

.ene-w-h-d /deep/ .ant-collapse {
  background: transparent;
}

.ene-w-h-d /deep/ .ant-input[disabled] {
  background: #ebecf0
}

.ene-w-h-d /deep/ .ant-collapse-content>.ant-collapse-content-box {
  padding: 0
}
</style>